import React, { Component } from 'react'
import { Tabs ,CheckList} from 'antd-mobile'
import { Getcoupon } from '../request/api'
import '../assets/css/youhui.css'

// 补0函数 月和日
function add0(m) {
  return m < 10 ? '0' + m : m
}

// 封装一个时间函数
function time(t) {
  let msg = '.'
  // console.log(t);
  let time = new Date(parseInt(t))

  let y = time.getFullYear()
  let m = time.getMonth() + 1
  let d = time.getDate()
  // console.log(time)
  return y + msg + add0(m) + msg + add0(d)
}

export default class youhui extends Component {
  constructor() {
    super()
    this.state = { list: [], zong: [] }
  }

  componentDidMount() {
    Getcoupon().then(res => {
      if (res.code == 200) {
        this.setState({
          zong: res.list,
          list: res.list[0].content
        })
      }
    })
  }

  fn(e) {
    console.log(e)
    this.setState({ list: this.state.zong[e].content })
  }

  render() {
    const { list } = this.state
    return (
      <div id="page">
        {/* <!-- 头部 --> */}
        <header>
          {/* <!-- 顶部信息 --> */}
          <div className="top_box">
            {/* <!-- 左箭头图标 --> */}
            <span className="iconfont icon-zuojiantou"></span>
            <h2>优惠券</h2>
            {/* <!-- 更多图标 --> */}
            <div className="more">
              {/* <!-- ...图标 --> */}
              <span className="iconfont icon-gengduo">
              </span>
              {/* <!-- 竖线 --> */}
              <div className="line"></div>
              {/* <!-- 小圆圈 --> */}
              <span className="iconfont icon-xiaoyuandian"></span>
            </div>
          </div>
        </header>
        <div className='oooo'>
          <Tabs onChange={this.fn.bind(this)} >
            <Tabs.Tab title='未使用' key={0} >
            </Tabs.Tab>
            <Tabs.Tab title='已使用' key={1} >
            </Tabs.Tab>
            <Tabs.Tab title='已失效' key={2} >
            </Tabs.Tab>
          </Tabs>

          <ul>
            <li ><CheckList defaultValue={[1]}>  {list.map(item => {
              return <div className='ooooo' key={item.id}>
                <CheckList.Item value={item.id}>
                  <div className='oooo1'>
                    <div className='oooo2'>
                      <p><span>$</span>{item.limit_money}</p>
                      <span>满{item.money}可用</span>
                    </div>
                    <div className='oooo3'>
                      <p>{item.title}</p>
                      <span>{time( item.begintime) }至{time(item.endtime)}</span>
                    </div>
                  </div>
                  <div className='oooo4'>使用规则:{item.description}</div></CheckList.Item>
              </div>
            })}</CheckList>
            </li>
          </ul>
        </div>
      </div>
    )
  }
}
